﻿<!DOCTYPE HTML>
<html>
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor/dist/jsoneditor.min.js"></script>
    <script src="filereader.js"></script>
    <script src="FileSaver.js"></script>
    <style>
        html, body {
            font: 11pt sans-serif;
        }

        #jsoneditor {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <h1>Load and save JSON documents</h1>
    <p>
        Load a JSON document: <input type="file" id="loadDocument" value="Load" />
    </p>
    <p>
        Save a JSON document: <input type="button" id="saveDocument" value="Save" />
    </p>
    <div id="jsoneditor"></div>
    <script>
        var options = {
            mode: 'tree',
            modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
            onError: function (err) {
                alert(err.toString());
            },
            onModeChange: function (newMode, oldMode) {
                console.log('Mode switched from', oldMode, 'to', newMode);
            }
        };
  // create the editor
        var editor = new JSONEditor(document.getElementById('jsoneditor'),options);

  // Load a JSON document
  FileReaderJS.setupInput(document.getElementById('loadDocument'), {
    readAsDefault: 'Text',
    on: {
      load: function (event, file) {
        editor.setText(event.target.result);
      }
    }
  });

  // Save a JSON document
  document.getElementById('saveDocument').onclick = function () {
    var blob = new Blob([editor.getText()], {type: 'application/json;charset=utf-8'});
    saveAs(blob, 'document.json');
  };
    </script>
</body>
</html>